{% extends 'base.html' %}

{% load static %}

{% block page_title %}Services Monitoring links{% endblock page_title %}
{% block head_title %}Services Monitoring links{% endblock %}

{% block content %}
    <div class="row">
        <div class="col-md-5" style="background-color: rgba(0, 0, 0, 0.05); padding: 20px;">
            <a href="//{{ domain }}:{{ rabbit_port }}/" target="_blank">
                <img class="img-responsive" src="{% static "img/monitoring_tool_rabbitmgmt.png" %}" style="max-height: 266px; margin: 0 auto;">
                <h3>RabbitMQ</h3>
            </a>
            <p>This page allows admins to view connections, queued messages, message rates, channels, exchanges, and other administrative features relating to rabbitmq e.g creating users, adding v-hosts, and creating policies.</p>
        </div>
        <div class="col-md-6 col-md-offset-1" style="background-color: rgba(0, 0, 0, 0.05); padding: 20px;">
            <a href="//{{ domain }}:{{ flower_port }}/" target="_blank">
                <img class="img-responsive" src="{% static "img/monitoring_tool_flower.png" %}" style="max-height: 266px; margin: 0 auto;">
                <h3>Flower</h3>
            </a>
            <p>Flower is a powerful web based Celery monitoring tool designed to keep track of our tasks. Admins may view the state of which tasks were run, with what arguments, and many more features. Here you may also view which queues your celery workers are consuming, and the state of any tasks in them. At last, there is also a great monitoring page for viewing the systemic impact of your workers.</p>
        </div>
    </div>
    <div class="row">
        <div class="col-md-5" style="background-color: rgba(0, 0, 0, 0.05); padding: 20px;">
            <a href="{% url 'health_status_simple' %}" target="_blank">
                <img class="img-responsive" src="{% static "img/monitoring_tool_healthsimplestatus.png" %}" style="max-height: 266px; margin: 0 auto;">
                <h3>Jobs status</h3>
            </a>
            <p>This page shows all recently made submissions. You can track their status, the queues and workers in which they are running, the competitions and the users who made them.</p>
        </div>
        <div class="col-md-6 col-md-offset-1" style="background-color: rgba(0, 0, 0, 0.05); padding: 20px;">
            <a href="{% url 'health_status' %}" target="_blank">
                <img class="img-responsive" src="{% static "img/monitoring_tool_healthstatus.png" %}" style="max-height: 266px; margin: 0 auto;">
                <h3>Health status</h3>
            </a>
            <p>Another, more general, view on recently made submissions.</p>
        </div>
    </div>
    <div class="row">
        <div class="col-md-5" style="background-color: rgba(0, 0, 0, 0.05); padding: 20px;">
            <a href="{% url 'admin:index' %}" target="_blank">
                <img class="img-responsive" src="{% static "img/monitoring_tool_django.png" %}" style="max-height: 266px; margin: 0 auto;">
                <h3>Django</h3>
            </a>
            <p>Access to many configurations and settings linked to Django.</p>
        </div>
        <div class="col-md-6 col-md-offset-1" style="background-color: rgba(0, 0, 0, 0.05); padding: 20px;">
            <a href="{% url 'health_storage_analytics' %}" target="_blank">
                <img class="img-responsive" src="{% static "img/monitoring_tool_storage.png" %}" style="max-height: 266px; margin: 0 auto;">
                <h3>Storage analytics</h3>
            </a>
            <p>Manage and gain insights about the platform's storage consumption.</p>
        </div>
    </div>
    <div class="row">
        <div class="col-md-5" style="background-color: rgba(0, 0, 0, 0.05); padding: 20px;">
            <a href="//{{ domain }}/analytics/" target="_blank">
                <img class="img-responsive" src="{% static "img/monitoring_tool_analytics.png" %}" style="max-height: 266px; margin: 0 auto;">
                <h3>Analytics</h3>
            </a>
            <p>Statistics about users and competitions.</p>
        </div>
    </div>
{% endblock %}
